<style lang="less" scoped>
	.collect {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.box {
			width: 100%;
			overflow: hidden;
			// height: 40%;
			position: relative;
			padding-bottom: 20%;
			background-color: #945978;

			.container {
				width: 90%;
				margin: 0 auto;
				text-align: center;
				position: relative;
				z-index: 600;
				transition: all 0.6s;

				.img {
					width: 30%;
					margin-top: 70px;

					img {
						width: 100%;
						border-radius: 10px;
					}
				}

				.text {
					position: absolute;
					top: 10px;

					// left: 35%;
					.name {
						color: #fefefe;
						font-size: 18px;
					}

					.author {
						margin-top: 10px;
						font-size: 14px;
						color: #ccc;

						img {
							width: 8%;
							border-radius: 50%;
							margin-right: 5px;
							margin-left: -10px;
						}
					}
				}

				.iconRow {
					margin-top: 35px;
					display: flex;
					justify-content: space-between;

					.icon1 {
						width: 31%;
						height: 34px;
						background-color: rgba(204, 204, 204, .8);
						border-radius: 20px;
						position: relative;
						line-height: 35px;
						// margin-right: 10%;
						padding-right: 15%;

						span {
							position: absolute;
							top: 0px;
							left: 45%;
							color: #fefefe;

						}
					}
				}

			}
		}

		.collect_list {
			position: absolute;
			top: 40%;
		}
	}
</style>
<template>
	<view class="collect" @touchmove="getScrollY">
		<meau-top :obj="meauDetail" class="collect_top"
			:style="scrollY>=265?`background-color: rgba(255, 255, 255, 0.1);`:``,`transition:all 0.6s`"></meau-top>
		<div class="box">
			<div class="container" :style="scrollY>=180?`opacity: 0;`:``">
				<div class="img">
					<img src="../../static/love.png" alt="" />
				</div>
				<div class="text">
					<div class="name">
						<span>我喜欢的音乐</span>
					</div>
					<div class="author">
						<img src="../../static/avatar.jpg" alt="" />
						<span>用户3306</span>
					</div>
				</div>
				<div class="iconRow">
					<div class="icon1">
						<uni-icons type="undo-filled" size="26" color="#fefefe"></uni-icons>
						<span>分享</span>
					</div>
					<div class="icon1">
						<uni-icons type="chat-filled" size="26" color="#fefefe"></uni-icons>
						<span>评论</span>
					</div>
					<div class="icon1">
						<uni-icons type="folder-add-filled" size="26" color="#fefefe"></uni-icons>
						<span>收藏</span>
					</div>
				</div>
			</div>
		</div>
		<meau-list class="collect_list" :collectList="collectList" :id='id' :scrollY='scrollY' @dataSent="handleData"></meau-list>
	</view>
</template>

<script>
	import meauTop from '../../components/meauTop.vue';
	import meauList from '../../components/meauList.vue';
	export default {
		components: {
			meauTop,
			meauList,
		},
		data() {
			return {
				meauDetail: {},
				id: '',
				scrollY: 0,
				isScroll: true,
				isLogin:false,
				collectList:[],
			};
		},
		onLoad() {
			this.getCollect()
		},
		methods: {
			getCollect() {
				let str = localStorage.getItem("CollectSongs");
				let token = localStorage.getItem("AUTO_TOKEN");
				console.log('1')
				if (token) {
					this.isLogin = true; //表示已经登录
					console.log('2'+str)
					
					if (str) {
						let arr = JSON.parse(str);
						if (arr) {
							let songs = arr;
							this.collectList = songs;
							console.log(this.collectList)
						}
					}
				}
			},

			fromatext(value) {
				let num = 0
				if (value > 10000 && value < 100000) {
					num = Math.floor(value / 10000) + Math.floor(value / 1000) % 10 / 10 + '万'
					return num
				} else if (value >= 100000) {
					num = Math.floor(value / 10000) + '万'
					return num
				} else {
					return value
				}
			},
			text(value) {
				let text = ''
				if (value.length > 28) {
					text = value.substring(0, 26) + '...'
				} else {
					text = value
				}
				return text
			},
			getScrollY(e) {
				let y = window.pageYOffset
				this.scrollY = y
				// console.log(y)
			},
			handleData(data) {
				this.isScroll = data
				console.log(data)
				if (!data) {
					document.body.style.overflow = 'hidden'
				} else {
					document.body.style.overflow = 'visible'
				}
			}
		},

	}
</script>